import React from 'react';
import Setting from './setting';
import Element from './element';
import './style/';

export default class ContainerView extends React.Component {
    handlerOnMouseLeaveElement = () => {
        const { id } = this.props;
        $(`.custom-element-setting-bottom-${id}`).hide();
        const _elementFollowHideDoms = window.elementFollowHideDoms;
        if (_elementFollowHideDoms && _elementFollowHideDoms[id]) {
            for (let i = 0; i < _elementFollowHideDoms[id].length; i++) {
                $(_elementFollowHideDoms[id][i]).hide();
            }
        }
    }

    handlerOnMouseEnterElement = () => {
        const { id } = this.props;
        $(`.custom-element-setting-bottom-${id}`).show();
        const _elementFollowHideDoms = window.elementFollowHideDoms;
        if (_elementFollowHideDoms && _elementFollowHideDoms[id]) {
            for (let i = 0; i < _elementFollowHideDoms[id].length; i++) {
                $(_elementFollowHideDoms[id][i]).show();
            }
        }
    }

    render() {
        const { id, uuid, SettingProxy, SettingProxyByEcode, ContainerViewExtend, ContainerViewExtendByEcode, tabsOnChange, setStateData, onLoad, moreUrl, hideHeader, hideTab, hideSettingButton } = this.props;
        const { data, tabId } = this.props.state;

        let _ContainerViewExtend = null;
        if (ContainerViewExtendByEcode && window.rewritePortalCusEle && typeof rewritePortalCusEle == 'function') {
            _ContainerViewExtend = window.rewritePortalCusEle({ ...this.props, data, tabId }, { id: uuid, componentName: 'ContainerViewExtend' });
        }

        let _SettingProxy = null;
        if (SettingProxyByEcode && window.rewritePortalCusEleSetting && typeof rewritePortalCusEleSetting == 'function') {
            _SettingProxy = window.rewritePortalCusEleSetting({ ...this.props, Setting, data, setStateData, onLoad }, { id: uuid, componentName: 'SettingProxy' });
        }

        return (
            <div className="custom-element" onMouseLeave={this.handlerOnMouseLeaveElement} onMouseEnter={this.handlerOnMouseEnterElement}>
                <Element ecId={`${this && this.props && this.props.ecId || ''}_Element@y0mxpl`} ref='Element' id={id} data={data} onChange={tabsOnChange} tabId={tabId} onLoad={onLoad} moreUrl={moreUrl} hideHeader={hideHeader} hideTab={hideTab}>
                    {
                        ContainerViewExtend ? (
                            <ContainerViewExtend ecId={`${this && this.props && this.props.ecId || ''}_ContainerViewExtend@xkdmdx`} {...this.props} data={data} tabId={tabId} />
                        ) : null
                    }
                    {
                        ContainerViewExtendByEcode ? (
                            _ContainerViewExtend
                        ) : null
                    }
                </Element>
                {
                    (this.props.isSetting == true || this.props.isSetting == 'true') && !hideSettingButton
                        ? (
                            <div className={`custom-element-setting-bottom custom-element-setting-bottom-${id}`} >
                                <span className="icon-coms-Flow-setting icon" onClick={() => {this.refs.SettingProxy.refs.Setting.onShow()}} />
                            </div>
                        ) : ''
                }
                {
                    SettingProxyByEcode ? (
                        _SettingProxy
                    ) : (
                        <SettingProxy ecId={`${this && this.props && this.props.ecId || ''}_SettingProxy@kaudcy`} ref='SettingProxy' {...this.props} Setting={Setting} data={data} setStateData={setStateData} onLoad={onLoad} />
                    )
                }

            </div>

        );
    }

}
